<template>
  <div>
    <van-nav-bar title="标题" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        name="mobile"
        label="手机号"
        placeholder="请输入手机号"
        :rules="rules.mobile"
      />
      <van-field
        v-model="code"
        name="code"
        label="验证码"
        placeholder="请输入验证码"
        :rules="rules.code"
      />
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :disabled="isloading"
          :loading="isloading"
          loading-text="正在登录中..."
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { login } from "../../api/login";
// import {setToken} from '../../utils/token' //token操作的封装
 import { userInfo } from '../../api/user'
export default {
  data() {
    return {
      mobile: "13812345678",
      code: "246810",
      // 规则对象
      rules: {
        mobile: [
          // 每个对象代码一条规则
          { required: true, message: "请填写手机号" },
          // 验证输入的内容是不是手机号的规则 因此要写正则
          // trigger：什么时候验证这条规则，可选值问onChange 和onBlur（默认值，失去焦点）
          { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "请输入正确的手机号" },
        ],
        code: [
          { required: true, message: "请填写验证码" },
          //
        ],
      },
      isloading: false,
    };
  },
  methods: {
    // 表单全部验证成功，再点提交才触发
    onSubmit(val) {
      // 把门关上（让按钮禁用）
      this.isloading = true;

      // 登录，发送请求给服务器
      login(val)
        .then(async(res) => {
          //成功
          // console.log(res);
          this.$toast({
            type: "success",
            message: "登录成功",
          });
          // 保存token
          // setToken(res.data.data)   这步操作放在vuex中的saveToken函数中完成

          // 保存到vuex里
          this.$store.commit("saveToken", res.data.data);

          // 再发一次请求获取用户信息
          let res2 = await userInfo()
          // 把结果存到vueX里
          this.$store.commit('saveUserInfo',res2)


          // 判读是否是其他页面回退到登录页面的，登录后返回之前页面
          if (this.$route.query.back) {
            this.$router.push(this.$route.query.back);
          } else {
            this.$router.push("/home");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$toast({
            type: "fail",
            message: "登录失败",
          });
        })
        .finally(() => {
          // 不管是请求成功，还是请求失败，最终都会执行的代码
          this.isloading = false;
        });
    },
  },
};
</script>

<style scoped lang="less"></style>
